<template>
	<view>
		<view class="charge-info"></view>
		<view class="content-view details">
			<uni-card :border="false">
				<view class="card">
					<view class="money">
						<view class="catch">{{info.occupyFees}}元</view>
						<view class="chargeDetails">
							<text>占仓费</text>
							<text>超时:{{mins}}分钟</text>
						</view>
					</view>
					<view class="time">
						<view>开始时间：{{info.beginTimes}}</view>
						<view>结束时间：{{info.endTimes}}</view>
						<view>充电时间：{{hour}}</view>
						<view>占仓时间：{{hours}}</view>
					</view>
				</view>
			</uni-card>
			<uni-card :border="false">
				<view>
					<view class="title">
						占仓费用说明
					</view>
					<view class="info">
						<view>充电完成后，2小时内免费。</view>
						<view>超出2小时，按1元/小时收费，最高收费5元。</view>
						<view>免费占仓时段：20:00-7:59</view>
					</view>
				</view>
			</uni-card>
			<view class="endButton">
				<view class="end immobilization-button" @click="spend">
					支付占仓费
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		loadUserChargingByIdOnMobile,
		createOrderByWechatMiniApp
	} from '../../api/api.js';
	import moment from '../../components/moment.js';
	export default {
		data() {
			return {
				info: '',
				hour: '',
				hours: '',
				min: '',
				mins: ''
			}
		},
		onLoad(options) {
			this.id = options.id
		},
		onShow() {
			this.details(this.id);
		},
		methods: {
			details(id) {
				loadUserChargingByIdOnMobile({
						'id': id
					})
					.then((res) => {
						this.hour = '';
						this.hours = '';
						res.data.occupyFees = Number(res.data.occupyFees).toFixed(2);
						res.data.beginTimes = moment(res.data.beginTime).format('HH:mm:ss');
						res.data.endTimes = moment(res.data.endTime).format('HH:mm:ss');
						let time = moment.duration(res.data.endTime - res.data.beginTime);
						// this.hour = time._data.hours;
						this.hour += time._data.hours > 0 ? time._data.hours + '小时' : '';
						this.hour += time._data.minutes > 0 ? time._data.minutes + '分' : '';
						this.hour += time._data.seconds > 0 ? time._data.seconds + '秒' : '';
						
						let newTime = moment.duration(res.data.lastOpenBinTime - res.data.endTime);
						this.hours += newTime._data.hours > 0 ? newTime._data.hours + '小时' : '';
						this.hours += newTime._data.minutes > 0 ? newTime._data.minutes + '分' : '';
						this.hours += newTime._data.seconds > 0 ? newTime._data.seconds + '秒' : '';
						// this.hours = Number(newTime._data.hours) - Number(2)
						// this.min = newTime._data.minutes
						// this.mins = (Number(newTime._data.hours) * 60) - (2 * 60) + (newTime._data.minutes)
						this.info = res.data;
						if (res.data.isPayOccupyFees == 1) {
							clearInterval(this.time);
							uni.hideLoading();
						}
					})
			},
			spend() {
				this.$Toast.loading('加载中');
				var information = this.info;
				uni.login({
					success: (res) => {
						let data = {
							"body": {
								"code": res.code,
								"payType": 3,
								"payWay": 2,
								"tradeAmount": information.occupyFees,
								"payAmount": information.occupyFees,
								"terminalType": 2,
								"cabinet": {
									"id": information.cabinet.id
								},
								"cabinetBin": {
									"id": information.bin.id
								},
								"chargeIntervalPrice": {
									"id": information.chargeIntervalPrice.id
								},
								"userCharging": { "id": information.id }
							}
						};
						// 微信支付
						createOrderByWechatMiniApp(data)
							.then((createRes) => {
								uni.getProvider({
									service: 'payment',
									success: function(res) {
										uni.hideLoading();
										uni.requestPayment({
											provider: res.provider[0],
											appId: createRes.data.appId,
											timeStamp: createRes.data.timeStamp,
											nonceStr: createRes.data.nonceStr,
											package: createRes.data.packageValue,
											signType: createRes.data.signType,
											paySign: createRes.data.paySign,
											prepayid: createRes.data.prepayId,
											success: function(res) {
												uni.showToast({
													title: '支付成功',
													icon: 'success',
													duration: 1500
												})
												var id = this.id;
												uni.showLoading({
													title: '请稍后...',
													mask: true
												});
												this.time = setInterval(() => {
													this.details(id)
												}, 1000)
											},
											fail: function(err) {
												console.log('失败', err)
												uni.hideLoading();
												uni.showToast({
													title: '支付失败',
													icon: 'none',
													duration: 1500
												})
											}
										})
									}
								});
							})
							.catch((error) => {
								console.log(error)
							});
					}
				})
			}
		}
	}
</script>

<style lang="less">
	@import url('../commonStyle/commonStyle.css');

	page {
		background-color: #f7f7f7;
	}

	.charge-info {
		width: 100%;
		height: 100upx;
		background-color: #1976d2;
	}

	.details {
		margin-top: -90upx;

		.card {
			padding: 50upx 0 30upx;

			.money {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.catch {
					font-size: 55upx;
					font-weight: bold;
					color: #3a3a3a;
				}

				.chargeDetails {
					display: flex;
					flex-direction: column;
					align-items: flex-end;
					font-size: 34upx;
					color: #393939;

					text:nth-child(2) {
						font-size: 28upx;
						color: #4ea7ff;
						margin-top: 10upx;
					}
				}
			}

			.time {
				display: flex;
				flex: 1;
				flex-wrap: wrap;
				font-size: 26upx;
				color: #858585;
				margin-top: 40upx;
				justify-content: center;

				view {
					width: 280upx;
					margin: 10upx 0;
				}

				view:nth-child(2n) {
					margin-left: 60upx;
				}
			}
		}
	}

	.title {
		margin-top: 30upx;
		font-size: 30upx;
		color-profile: #393939;
		font-weight: bold;
	}

	.info {
		margin-left: 10upx;
		margin-top: 20upx;
		color: #393939;
		font-size: 26upx;
		margin-bottom: 50upx;

		view:nth-child(2) {
			margin: 10upx 0;
		}
	}

	.endButton {
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.end {
		height: 86upx;
		background-image: linear-gradient(90deg,
				#1976d2 0%,
				#0d80e9 26%,
				#008aff 51%,
				#1976d2 100%),
			linear-gradient(#1976d2,
				#1976d2);
		color: #fff;
		line-height: 86upx;
		text-align: center;
		margin-top: 45upx;
		border-radius: 10upx;
		font-size: 34upx;
	}
</style>
